<template>
  <div>
    <nut-navbar class="title">购物车</nut-navbar>

    <div class="address-list other" @click="showAddressOther()">
      <div class="titile">
        <svg width="10px" height="10px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <title>icon_address_black</title>
          <desc>Created with Sketch.</desc>
          <g id="搜索流程" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="3_搜索流程-copy" transform="translate(-137.000000, -90.000000)" fill="#333333">
              <g id="icon_address" transform="translate(137.000000, 90.000000)">
                <g id="分组">
                  <path d="M8.84815,8.7378 C8.06565,9.3058 7.28265,9.8733 6.50015,10.4408 C5.71715,9.8733 4.93465,9.3058 4.15165,8.7378 C2.74865,7.7203 2.16065,5.9148 2.69565,4.2658 C3.23065,2.6168 4.76665,1.5003 6.50015,1.5003 C8.23365,1.5003 9.76965,2.6168 10.30465,4.2658 C10.83915,5.9148 10.25165,7.7203 8.84815,8.7378 M11.25565,3.9568 C10.58715,1.8958 8.66665,0.4998 6.50015,0.4998 C4.33315,0.4998 2.41315,1.8958 1.74415,3.9568 C1.07565,6.0183 1.81065,8.2753 3.56465,9.5478 C4.39665,10.1508 5.22815,10.7538 6.05965,11.3568 C6.32215,11.5478 6.67765,11.5478 6.94065,11.3568 C7.77215,10.7538 8.60365,10.1508 9.43515,9.5478 C11.18915,8.2753 11.92415,6.0183 11.25565,3.9568"
                      id="Fill-2"></path>
                  <path d="M7.9143,4.08595 C7.7188,3.89045 7.4023,3.89045 7.2068,4.08595 C7.0118,4.28145 7.0118,4.59745 7.2068,4.79295 C7.8373,5.42295 7.3908,6.49995 6.4998,6.49995 C5.6093,6.49995 5.1628,5.42295 5.7928,4.79295 C5.9878,4.59745 5.9878,4.28145 5.7928,4.08595 C5.5978,3.89045 5.2808,3.89045 5.0858,4.08595 C3.8258,5.34595 4.7183,7.49995 6.4998,7.49995 C8.2818,7.49995 9.1743,5.34595 7.9143,4.08595"
                      id="Fill-4"></path>
                  <path d="M8,12 L5,12 C4.724,12 4.5,12.2235 4.5,12.5 C4.5,12.7765 4.724,13 5,13 L8,13 C8.276,13 8.5,12.7765 8.5,12.5 C8.5,12.2235 8.276,12 8,12"
                      id="Fill-6"></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
      </div>
      <div class="choose">配送至：{{ Address.address }}</div>
    </div>

    <SelectAddress @func="getAddress" :state="showPopupOther"></SelectAddress>

    <div>
      <div class="carGoods">
        <ShopCarGoods :data="shopGoods"></ShopCarGoods>
      </div>
    </div>

    <div class="bottomQ">
      <div style="display: flex">
        <nut-checkbox style="margin: 0 12px" v-model="selectedAll">
          全选
        </nut-checkbox>
        <div style="font-size: 14px;">合计: <span style="font-weight: bold;font-size: 15px"> ￥0.00</span></div>
      </div>

      <div>
        <nut-button style="margin-right: 12px" type="primary" shape="circle" small>
          去结算（0）
        </nut-button>
      </div>

    </div>

    <div class="order">
      <div v-for="item in goodsInfo">
        <nut-checkbox class="check" v-model="item.checked" :animation="false">
          {{ item.name }}
        </nut-checkbox>
      </div>

      <nut-button small @click="checkAll">全选</nut-button>
      <nut-button small @click="uncheckAll">取消全选</nut-button>
      <nut-button small @click="inverse">反选</nut-button>

    </div>

  </div>
</template>

<script scoped>

import axios from "axios";
import districts from "../plugins/districts";
import ShopCarGoods from "../components/ShopCarGoods";
import SelectAddress from "@/components/SelectAddress";

export default {
  name: "ShopingCar",
  props: {},
  components: {SelectAddress, ShopCarGoods},
  computed: {},
  data() {
    return {
      showPopupOther: 0,
      shopGoods: [{
        "id": 2,
        "img": "https://img10.360buyimg.com/mobilecms/s234x234_jfs/t1/152252/14/8891/287531/5fceec03Efd9f135d/a51378bd8c29db62.jpg!q70.dpg.webp",
        "title": "这是一台很牛逼的显示器",
        "number": 999,
        "price": 799,
        "type": [],
      }],
      Address: {},
      selectedAll: true,
      goodsInfo: [
        {
          "id": 0,
          "name": "一个米ubi",
          "image": "https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/146373/36/16250/97942/5fc5ad56E536e186a/dfd00ccf13286f49.jpg.webp",
          "price": 100.0,
          "obj2": 1,
        },
        {
          "id": 1,
          "name": "莎莎东西",
          "image": "https://img14.360buyimg.com/seckillcms/s280x280_jfs/t1/124963/31/7038/155532/5f0c13feE4b0710c7/342fddf5b02de68b.jpg.webp",
          "price": 225.0,
          "obj2": 2,
        }
      ]
    }
  },
  methods: {
    showAddressOther() {
      this.showPopupOther == 0 ? this.showPopupOther = 1 : this.showPopupOther = 0;
    },
    checkAll() {
      this.goodsInfo.forEach(item => {
        item.checked = true;
      })
    },
    inverse() {
      this.goodsInfo.forEach(item => {
        item.checked = !item.checked;
      })
    },
    uncheckAll() {
      this.goodsInfo.forEach(item => {
        item.checked = false;
      })
    },
    getAddress(address) {
      this.Address = address;
    }

  },
  watch: {},
  mounted() {
  },
  created() {
  }
}
</script>

<style scoped>
>>> .nav-title {
  font-weight: normal;
}

.title {
  border-bottom: #eeeeee solid 1px;
}

.other {
  background: white;
  border-radius: 0 0 13px 13px;
  display: flex;
  align-items: center;
  padding: 4px;
  font-size: 13px;
  font-weight: normal;
  height: 7vh;
}


>>> .nut-checkbox input {
  border-radius: 15px;
}

>>> .nut-checkbox.nut-checkbox-size-base .nut-checkbox-label {
  font-size: 10px;
}

.titile {
  margin: 0 10px;
}

.carGoods {
  background: white;
  height: 20vh;
  margin: 1vh 0;
  border-radius: 13px;
}

.bottomQ {
  position: absolute;
  bottom: 70px;
  width: 100vw;
  background: #ffffff;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}

</style>